---
export interface Props {
  title: string;
  description?: string;
  pageClass?: string;
  ogImage?: string;
}

const {
  title,
  description = "Enjoy the stunning up-to-date information of Kiyomizu-dera Temple.",
  pageClass = "page-home",
  ogImage = "/img/common/ogp/home.jpg",
} = Astro.props;
---

<!doctype html>
<html dir="ltr" lang="ja">
  <head>
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta charset="utf-8" />
    <title>{title}</title>
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={Astro.url.href} />
    <meta property="og:image" content={ogImage} />
    <meta
      name="keywords"
      content="KIYOMIZU-DERA TEMPLE,Kiyomizu,Kyoto,Japan,sightseeing,tourism"
    />
    <meta name="description" content={description} />
    <meta property="og:site_name" content="KIYOMIZU-DERA TEMPLE" />
    <meta property="og:type" content="website" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/shortcut.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/style.css" media="screen,print" />
    <link rel="stylesheet" href="/fix.css" media="screen,print" />
  </head>
  <body class={`${pageClass} load loded`}>
    <!-- Google Tag Manager (noscript) -->
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-K878G3Z"
        height="0"
        width="0"
        style="display:none;visibility:hidden"></iframe></noscript
    >
    <!-- End Google Tag Manager (noscript) -->

    <header>
      <div class="header_base"></div>
      <div class="header_wrap">
        <a href="/" id="logo">
          <img
            class="img_w"
            src="/img/common/icon/logo_pc_w.svg"
            alt="Kiyomizu-dera Temple Kyoto, Japan"
            width="226"
            height="40"
            decoding="async"
          />
          <img
            class="img_b"
            src="/img/common/icon/logo_pc_b.svg"
            alt="Kiyomizu-dera Temple Kyoto, Japan"
            width="226"
            height="40"
            decoding="async"
          />
        </a>
        <nav class="pcnav">
          <ul class="gnav">
            <li class="gnav_01">
              <a
                href="/ports"
                class={Astro.url.pathname.startsWith("/ports") ? "current" : ""}
                ><span class="navwrap">PORTS</span></a
              >
            </li>
            <li class="gnav_02">
              <a
                href="/about"
                class={Astro.url.pathname.startsWith("/about") ? "current" : ""}
                ><span class="navwrap">ABOUT</span></a
              >
            </li>
            <li class="gnav_03">
              <a
                href="/tag"
                class={Astro.url.pathname.startsWith("/tag") ? "current" : ""}
                ><span class="navwrap">TAG</span></a
              >
            </li>
          </ul>
          <ul class="sns_nav">
            <li class="snsnav_01">
              <a
                href="https://www.facebook.com/KiyomizuderaTemple/?fref=ts"
                target="_blank"
                ><span>
                  <img
                    src="/img/common/icon/fb_pc_w.svg"
                    title=""
                    alt="Facebook"
                    width="20"
                    class="img_w"
                  />
                  <img
                    src="/img/common/icon/fb_pc_b.svg"
                    title=""
                    alt="Facebook"
                    width="20"
                    class="img_b"
                  />
                </span></a
              >
            </li>
            <li class="snsnav_03">
              <a
                href="https://www.instagram.com/feel_kiyomizudera/"
                target="_blank"
                ><span>
                  <img
                    src="/img/common/icon/in_pc_w.svg"
                    title=""
                    alt="Instagram"
                    width="20"
                    class="img_w"
                  />
                  <img
                    src="/img/common/icon/in_pc_b.svg"
                    title=""
                    alt="Instagram"
                    width="20"
                    class="img_b"
                  />
                </span></a
              >
            </li>
            <li class="snsnav_04">
              <a
                href="https://www.youtube.com/channel/UCBFW3Al5zoKJOVJaLcDUL9Q"
                target="_blank"
                ><span>
                  <img
                    src="/img/common/icon/yt_pc_w.svg"
                    title=""
                    alt="YouTube"
                    width="44"
                    class="img_w"
                  />
                  <img
                    src="/img/common/icon/yt_pc_b.svg"
                    title=""
                    alt="YouTube"
                    width="44"
                    class="img_b"
                  />
                </span></a
              >
            </li>
          </ul>
          <ul class="lan_nav">
            <li class="lan_nav_li">
              <dl class="lan_nav_li_dl">
                <dt class="lan_nav_li_dl_dt">EN</dt>
                <dd class="lan_nav_li_dl_dd">
                  <a class="lan_nav_li_dl_dd_a" href="/">JA</a>
                </dd>
              </dl>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <a href="javascript:void(0);" class="menubutton">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </a>

    <div id="tbsp_nav">
      <div class="base"></div>
      <nav class="tbspnav">
        <ul class="gnav">
          <li class="gnav_00">
            <a href="/"
              ><div class="gnav_base"></div><span class="navwrap">TOP</span></a
            >
          </li>
          <li class="gnav_01">
            <a
              href="/ports"
              class={Astro.url.pathname.startsWith("/ports") ? "current" : ""}
              ><div class="gnav_base"></div><span class="navwrap">PORTS</span
              ></a
            >
          </li>
          <li class="gnav_02">
            <a
              href="/about"
              class={Astro.url.pathname.startsWith("/about") ? "current" : ""}
              ><div class="gnav_base"></div><span class="navwrap">ABOUT</span
              ></a
            >
          </li>
          <li class="gnav_03">
            <a
              href="/tag"
              class={Astro.url.pathname.startsWith("/tag") ? "current" : ""}
              ><div class="gnav_base"></div><span class="navwrap">TAG</span></a
            >
          </li>
        </ul>
        <div class="sns_nav_wrap">
          <div class="sns_nav_base"></div>
          <ul class="sns_nav">
            <li class="snsnav_01">
              <a
                href="https://www.facebook.com/KiyomizuderaTemple/?fref=ts"
                target="_blank"
                ><img
                  src="/img/common/icon/fb.svg"
                  title=""
                  alt="Facebook"
                  width="28"
                /></a
              >
            </li>
            <li class="snsnav_03">
              <a
                href="https://www.instagram.com/feel_kiyomizudera/"
                target="_blank"
                ><img
                  src="/img/common/icon/in.svg"
                  title=""
                  alt="Instagram"
                  width="28"
                /></a
              >
            </li>
            <li class="snsnav_04">
              <a
                href="https://www.youtube.com/channel/UCBFW3Al5zoKJOVJaLcDUL9Q"
                target="_blank"
                ><img
                  src="/img/common/icon/yt.svg"
                  title=""
                  alt="YouTube"
                  width="50"
                /></a
              >
            </li>
            <li class="snsnav_lan">
              <span class="snsnav_lan_span"
                >EN
                <select class="snsnav_lan_span_select" onchange="sp_lang()">
                  <option value="/">JP</option>
                  <option selected>EN</option>
                </select>
              </span>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <div id="wrapAll">
      <slot />
    </div>

    <a href="#" id="totop">
      <img
        src="/img/common/icon/totop.svg"
        alt="Back to Top"
        width="77"
        height="77"
        loading="lazy"
      />
    </a>

    <footer>
      <a href="#" id="totop_SP">
        <img
          src="/img/common/icon/totop.svg"
          alt="Back to Top"
          width="77"
          height="77"
          loading="lazy"
        />
      </a>
      <div class="footer_wrap">
        © <span style="letter-spacing: 0.05em;">K</span><span
          style="letter-spacing: 0.09em;">i</span
        ><span style="letter-spacing: 0.06em;">y</span><span
          style="letter-spacing: 0.09em;">o</span
        ><span style="letter-spacing: 0.08em;">m</span><span
          style="letter-spacing: 0.09em;">i</span
        ><span style="letter-spacing: 0.09em;">z</span>u<span
          style="letter-spacing: 0.12em;">-</span
        ><span style="letter-spacing: 0.09em;">d</span><span
          style="letter-spacing: 0.09em;">e</span
        >ra <span style="letter-spacing: 0.03em;">T</span><span
          class="k target"
          style="letter-spacing: 0.07em;">e</span
        ><span style="letter-spacing: 0.09em;">m</span><span
          style="letter-spacing: 0.07em;">p</span
        ><span style="letter-spacing: 0.09em;">l</span>e
      </div>
    </footer>

    <!-- 本地修复脚本 -->
    <script>
      // 确保页面正确显示
      document.addEventListener("DOMContentLoaded", function () {
        // 添加必要的类来显示内容
        document.body.classList.add("load", "loded");

        // 隐藏加载动画
        const loading = document.getElementById("loading");
        if (loading) {
          loading.style.display = "none";
        }

        // 确保主要内容可见
        const wrapAll = document.getElementById("wrapAll");
        if (wrapAll) {
          wrapAll.style.opacity = "1";
        }
      });

      // 简单的图片懒加载替代
      document.addEventListener("DOMContentLoaded", function () {
        const images = document.querySelectorAll("img[data-src]");
        images.forEach((img) => {
          if (img.dataset.src) {
            img.src = img.dataset.src;
          }
        });
      });
    </script>
  </body>
</html>
